<template>
	<view class="body">
		<image :src="priceImgUrl" alt="" style="width: 100%;height:calc(100% - 350px); " />
		<view class="t-c">
			<view class="t-t">充值活动三选一</view>
			<view class="t-f">
				<view class="t-v" :class="[inx === '1' ? 't-active' : '']" @click="inx = '1'">
					<view class="mark">超值活动一</view>
					<view class="con1">充{{ threeData.buyPriceOne }}得</view>
					<view class="con2">{{ threeData.totalPriceOne }}<text class="yuan">元</text></view>
				</view>
				<view class="t-v" :class="[inx === '2' ? 't-active' : '']" @click="inx = '2'">
					<view class="mark">活动二</view>
					<view class="con1">充{{ threeData.buyPriceTwo }}得</view>
					<view class="con2">{{ threeData.totalPriceTwo }}<text class="yuan">元</text></view>
				</view>
				<view class="t-v" :class="[inx === '3' ? 't-active' : '']" @click="inx = '3'">
					<view class="mark">活动三</view>
					<view class="con1">充{{ threeData.buyPriceThree }}得</view>
					<view class="con2">{{ threeData.totalPriceThree }}<text class="yuan">元</text></view>
				</view>
			</view>
			<view class="tips_box" v-if="inx === '1'">
				<text>充值{{ threeData.buyPriceOne }}元</text>
				<view>开通需参加首充{{ threeData.buyPriceOne }}得{{ threeData.totalPriceOne }}活动，首充{{ threeData.buyPriceOne
			}}元，得{{ threeData.totalPriceOne }}元活动余额。
					订购套餐，实名认证后，即可畅享网络</view>
			</view>
			<view class="tips_box" v-if="inx === '2'">
				<text>充值{{ threeData.buyPriceTwo }}元</text>
				<view>开通需参加首充{{ threeData.buyPriceTwo }}得{{ threeData.totalPriceTwo }}活动，首充{{ threeData.buyPriceTwo
			}}元，得{{ threeData.totalPriceTwo }}元活动余额。
					订购套餐，实名认证后，即可畅享网络</view>
			</view>
			<view class="tips_box" v-if="inx === '3'">
				<text>充值{{ threeData.buyPriceThree }}元</text>
				<view>开通需参加首充{{ threeData.buyPriceThree }}得{{ threeData.totalPriceThree }}活动，首充{{ threeData.buyPriceThree
			}}元，得{{ threeData.totalPriceThree }}元活动余额。
					订购套餐，实名认证后，即可畅享网络</view>
			</view>
		</view>
		<view class="footer-btn">
			<view class="btn" v-if="inx === '1'" @click="toBuyPrice(threeData.buyPriceOne)">
				充{{ threeData.buyPriceOne }}得{{ threeData.totalPriceOne }}元</view>
			<view class="btn" v-if="inx === '2'" @click="toBuyPrice(threeData.buyPriceTwo)">
				充{{ threeData.buyPriceTwo }}得{{ threeData.totalPriceTwo }}元</view>
			<view class="btn" v-if="inx === '3'" @click="toBuyPrice(threeData.buyPriceThree)">
				充{{ threeData.buyPriceThree }}得{{ threeData.totalPriceThree }}元</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				priceImgUrl: uni.getStorageSync("imgUrl"),
				threeData: {
					buyPriceOne: '', // 充值金额
					totalPriceOne: '',//赠送金额
			
					buyPriceTwo: '',
					totalPriceTwo: '',
			
					buyPriceThree: '',
					totalPriceThree: '',
			
					imgUrl: '' //
				},
				title: '',
				inx: '1',
				payType:'',
			}
		},
		onShow() {
			this.$api.priceInfos({
				iccid: uni.getStorageSync("iccid") || '',
			}).then(res => {
				console.log(res)
				if (res.code === '200') {
					this.title = res.data.title;
					var result = res.data;
					for (var key in this.threeData) {
						if (result[key]) {
							this.threeData[key] = result[key]
						}
					}
				} else {
					// uni.showToast({
					// 	title: orderId + res.message,
					// 	icon: 'none'
					// })
				}
			})
		},
		created() {
			var anzuo = uni.getSystemInfoSync().platform === 'android' ? '1' : '0'
			this.$api.payChanle({iccid: uni.getStorageSync('iccid') || '',anzuo}).then(res=>{
				for (let i = 0; i < res.data.length; i++) {
					if(res.data[i].payType !=10){
						this.payType=res.data[i].payType;
					}
				}
			})
		},
		methods: {
			toBuyPrice(price){
				var params = {
					iccid: uni.getStorageSync('iccid') || '',
					amount: price, //固定值
					giftBalance: 0, //固定值
					yucun: 1, //固定值
					payType: this.payType, // 固定微信支付
				}
				if(!this.payType){
					uni.showToast({
						title: '缺少支付方式！',
						icon: 'none'
					})
					return
				}
				//支付接口
				this.$api.priceOrder(params).then(res=>{
					if(res.code === '200'){
						console.log(params)
						uni.setStorageSync('orderNo',res.data.orderNo)
						if(params.payType === 80){ //支付宝h5支付
							//#ifdef H5
								window.location.href=res.data.payInfo;
							//#endif
							//#ifdef APP-PLUS
								plus.runtime.openURL(res.data.payInfo)
							//#endif
						}else if(params.payType === 88){//支付宝app支付
							uni.requestPayment({
								provider: 'alipay',
								orderInfo: res.data.payInfo, //支付宝订单数据
								success: function(res) {
									console.log('success:' + JSON.stringify(res));
								},
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
								}
							});
						}else if(params.payType === 20){// 微信h5支付
							//#ifdef H5
								window.location.href=res.data.payInfo;
							//#endif
							//#ifdef APP-PLUS
								plus.runtime.openURL(res.data.payInfo)
							//#endif
						}else if(params.payType === 22||params.payType === 23||params.payType === 24){ //微信小程序支付
							//TODO
							// this.pay.wxpay(1,res.data);
							//#ifdef APP-PLUS
							var data = res.data
							plus.share.getServices(childRes => {
								let sweixin = null;
								for (let i in childRes) {
									if (childRes[i].id == 'weixin') {
										sweixin = childRes[i];
									}
								}
								//唤醒微信小程序
								if (sweixin) {
									sweixin.launchMiniProgram({
										id: 'gh_1c60bd6e4f46', //小程序原始id
										type:0, //小程序版本  0-正式版； 1-测试版； 2-体验版。
										// path: '/pages/index/index?price=100&payType=22&orderNo=HFDKG202311010000067755' //小程序的页面,用传的参数在小程序接值判断跳转指定页面
										path: '/pages/index/index?payType='+data.payType+ '&orderNo='+data.orderNo //小程序的页面,用传的参数在小程序接值判断跳转指定页面
									},
									//目标小程序点击返回App后执行的回调,在此接收binderror="launchAppError"的参数
									res1 => {
										console.log(res1)
									},err => {
										console.log(err)
									});
								}
							});
							//#endif
						}else{ //扫码支付 
							var param = {
								orderNo:res.data.orderNo,
								payUrl:res.data.payUrl,
								payImg:res.data.payImg,
							}
							let base64 = new this.$base64()
							uni.navigateTo({
								url:'/pages/scanCodePayment/index?params='+base64.encode(JSON.stringify(param))
							})
						}
					}else{
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	.body {
		/* //background: url('../../assets/dzp/le20.jpg')no-repeat center; */
		// background-repeat: no-repeat !important;
		// background-position: center !important;
		// background-size: 100% 100% !important;
		width: 100%;
		position: relative;
		height: 100vh;
		.footer-btn {
			position: fixed;
			bottom: 0px;
			left: 0px;
			right: 0px;
			margin: auto;

			.btn {
				width: 325px;
				height: 48px;
				background: linear-gradient(to right, rgb(255, 96, 52), rgb(238, 10, 36));
				/* background-size: 100% 100%; */
				margin: 10px auto;
				font-size: 18px;
				font-weight: 700;
				text-align: center;
				line-height: 48px;
				color: #fff;
				border-radius: 30px;
				animation: free_download 1s linear infinite alternate;
			}
		}

		.t-c {
			border: 5px solid #50b9fd;
			border-radius: 10px;
			margin: 20px 30px 10px;
			padding: 30px 6px 20px;
			position: relative;

			.t-t {
				position: absolute;
				left: 50%;
				top: -20px;
				margin-left: -100px;
				width: 200px;
				height: 40px;
				line-height: 40px;
				font-size: 16px;
				color: #fff;
				background-color: #50b9fd;
				border-radius: 10px;
				text-align: center;
				font-weight: bolder;
				letter-spacing: 2px;
			}

			.t-f {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.t-v {
					width: 31%;
					height: 112px;
					background: url('./../../static/img/3.png')no-repeat center;
					background-size: 100% 100%;
					font-size: 12px;
					font-weight: 700;
					padding: 20px 10px;
					box-sizing: border-box;
					position: relative;

					.mark {
						position: absolute;
						left: 0;
						top: 0;
						background-color: #d2d2d2;
						color: #fff;
						font-size: 12px;
						border-top-left-radius: 10px;
						border-bottom-right-radius: 10px;
						padding: 1px 8px;
					}

					.con2 {
						font-size: 26px;
						position: relative;
					}
				}

				.t-active {
					background: url('./../../static/img/2.png')no-repeat center;
					background-size: 100% 100%;

					.mark {
						background-color: #50b9fd;
						color: #000;
					}
				}
			}

			.tips_box {
				background-color: #d1f0ff;
				padding: 6px 10px;
				border-radius: 15px;
				font-size: 12px;
				margin-top: 5px;
				width: calc(100% - 35px);
				margin-right: 15px;
				padding-top: 12px;

				text {
					font-size: 16px;
					margin-bottom: 5px;
					font-weight: bolder;
				}

				view {
					line-height: 20px;
				}
			}
		}
	}
</style>